{% extends "base.html" %}

{% block title %}讨论区 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .forum-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    .forum-header {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 2rem;
        margin-bottom: 2rem;
        text-align: center;
    }
    .forum-title {
        font-size: 2rem;
        font-weight: 700;
        color: #495057;
        margin-bottom: 0.5rem;
    }
    .forum-description {
        color: #6c757d;
        max-width: 600px;
        margin: 0 auto;
    }
    .forum-actions {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-top: 1.5rem;
    }
    .forum-actions .btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .forum-layout {
        display: flex;
        gap: 2rem;
    }
    .forum-main {
        flex: 3;
    }
    .forum-sidebar {
        flex: 1;
        min-width: 280px;
    }
    .category-section {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }
    .category-header {
        padding: 1.5rem;
        border-bottom: 1px solid #e9ecef;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .category-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #495057;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .category-icon {
        font-size: 1.5rem;
        color: #007bff;
    }
    .category-actions {
        display: flex;
        gap: 0.75rem;
    }
    .category-filter {
        padding: 0.5rem 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        background-color: white;
        color: #495057;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .category-filter:hover {
        background-color: #f8f9fa;
    }
    .category-filter.active {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }
    .topics-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .topic-item {
        padding: 1.5rem;
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s;
        cursor: pointer;
        display: flex;
        gap: 1.5rem;
    }
    .topic-item:hover {
        background-color: #f8f9fa;
    }
    .topic-item:last-child {
        border-bottom: none;
    }
    .topic-status {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 60px;
    }
    .topic-replies {
        font-size: 1.25rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.25rem;
    }
    .topic-replies-label {
        font-size: 0.75rem;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .topic-content {
        flex: 1;
        min-width: 0;
    }
    .topic-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.5rem;
    }
    .topic-title {
        font-size: 1.125rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
        text-decoration: none;
        display: inline-block;
        transition: color 0.2s;
    }
    .topic-title:hover {
        color: #007bff;
    }
    .topic-meta {
        display: flex;
        gap: 1rem;
        font-size: 0.875rem;
        color: #6c757d;
    }
    .topic-author {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .topic-author-avatar {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        object-fit: cover;
    }
    .topic-time {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    .topic-labels {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    .topic-label {
        padding: 0.25rem 0.75rem;
        border-radius: 1rem;
        font-size: 0.75rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s;
    }
    .topic-label.primary {
        background-color: #e3f2fd;
        color: #1976d2;
    }
    .topic-label.primary:hover {
        background-color: #bbdefb;
    }
    .topic-label.success {
        background-color: #e8f5e9;
        color: #388e3c;
    }
    .topic-label.success:hover {
        background-color: #c8e6c9;
    }
    .topic-label.warning {
        background-color: #fff3e0;
        color: #f57c00;
    }
    .topic-label.warning:hover {
        background-color: #ffe0b2;
    }
    .topic-label.danger {
        background-color: #ffebee;
        color: #d32f2f;
    }
    .topic-label.danger:hover {
        background-color: #ffcdd2;
    }
    .topic-stats {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 80px;
    }
    .topic-views {
        font-size: 0.875rem;
        color: #6c757d;
        margin-bottom: 0.25rem;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    .topic-likes {
        font-size: 0.875rem;
        color: #6c757d;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    .sidebar-section {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }
    .sidebar-section-header {
        padding: 1.5rem;
        border-bottom: 1px solid #e9ecef;
    }
    .sidebar-section-title {
        font-size: 1.125rem;
        font-weight: 600;
        color: #495057;
    }
    .sidebar-section-content {
        padding: 1.5rem;
    }
    .search-box {
        position: relative;
    }
    .search-input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        font-size: 1rem;
    }
    .search-input:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    .search-btn {
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #6c757d;
        cursor: pointer;
        padding: 0.5rem;
    }
    .search-btn:hover {
        color: #007bff;
    }
    .categories-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .category-item {
        padding: 0.75rem 0;
        border-bottom: 1px solid #e9ecef;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .category-item:last-child {
        border-bottom: none;
    }
    .category-link {
        color: #495057;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        transition: color 0.2s;
    }
    .category-link:hover {
        color: #007bff;
    }
    .category-icon-sidebar {
        font-size: 1.25rem;
        color: #6c757d;
    }
    .category-count {
        padding: 0.25rem 0.75rem;
        background-color: #e9ecef;
        border-radius: 1rem;
        font-size: 0.75rem;
        color: #495057;
    }
    .tags-cloud {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .tag-item {
        padding: 0.4rem 0.75rem;
        background-color: #f8f9fa;
        border-radius: 1rem;
        font-size: 0.875rem;
        color: #495057;
        text-decoration: none;
        transition: all 0.2s;
    }
    .tag-item:hover {
        background-color: #007bff;
        color: white;
    }
    .online-users {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .online-user-item {
        padding: 0.75rem 0;
        border-bottom: 1px solid #e9ecef;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .online-user-item:last-child {
        border-bottom: none;
    }
    .online-user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        position: relative;
    }
    .online-user-avatar::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 12px;
        height: 12px;
        background-color: #28a745;
        border: 2px solid white;
        border-radius: 50%;
    }
    .online-user-info {
        flex: 1;
        min-width: 0;
    }
    .online-user-name {
        font-weight: 500;
        color: #495057;
        margin-bottom: 0.25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .online-user-status {
        font-size: 0.75rem;
        color: #6c757d;
    }
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        margin-top: 2rem;
    }
    .pagination-item {
        width: 36px;
        height: 36px;
        border-radius: 0.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }
    .pagination-item:not(.disabled):not(.active):hover {
        background-color: #f8f9fa;
        color: #007bff;
    }
    .pagination-item.active {
        background-color: #007bff;
        color: white;
    }
    .pagination-item.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    .alert {
        padding: 1rem;
        border-radius: 0.25rem;
        margin-bottom: 1.5rem;
    }
    .alert-success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    .alert-danger {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    .alert-warning {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }
    .alert-info {
        background-color: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
    }
    /* 响应式设计 */
    @media (max-width: 992px) {
        .forum-layout {
            flex-direction: column;
        }
        .forum-sidebar {
            min-width: auto;
        }
        .topic-item {
            flex-wrap: wrap;
            gap: 1rem;
        }
        .topic-status {
            min-width: auto;
        }
        .topic-stats {
            min-width: auto;
        }
    }
    @media (max-width: 768px) {
        .forum-header {
            padding: 1.5rem 1rem;
        }
        .forum-title {
            font-size: 1.5rem;
        }
        .forum-actions {
            flex-direction: column;
        }
        .forum-actions .btn {
            justify-content: center;
        }
        .category-header {
            padding: 1rem;
            flex-direction: column;
            gap: 1rem;
            align-items: stretch;
        }
        .category-actions {
            justify-content: center;
        }
        .topic-item {
            padding: 1rem;
        }
        .topic-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }
        .topic-meta {
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .sidebar-section-header {
            padding: 1rem;
        }
        .sidebar-section-content {
            padding: 1rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">
        <i class="fa fa-comments mr-2 text-primary"></i>讨论区
    </h1>
    <p class="text-gray-600">参与校园热门话题讨论，分享学习心得</p>
</div>

<!-- 消息提示区域 -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<div class="forum-container">
    <!-- 讨论区头部 -->
    <div class="forum-header">
        <h2 class="forum-title">校园讨论区</h2>
        <p class="forum-description">
            这里是校园师生交流的平台，你可以在这里提问、分享经验、讨论学术问题，结交志同道合的朋友。
        </p>
        <div class="forum-actions">
            <button id="new-topic-btn" class="btn btn-primary">
                <i class="fa fa-pencil"></i>
                发布新话题
            </button>
            <button id="my-topics-btn" class="btn btn-secondary">
                <i class="fa fa-user"></i>
                我的话题
            </button>
        </div>
    </div>
    
    <!-- 讨论区布局 -->
    <div class="forum-layout">
        <!-- 主要内容区 -->
        <div class="forum-main">
            <!-- 热门话题 -->
            <div class="category-section">
                <div class="category-header">
                    <h3 class="category-title">
                        <i class="fa fa-fire category-icon"></i>
                        热门话题
                    </h3>
                    <div class="category-actions">
                        <button class="category-filter active">
                            <i class="fa fa-thumbs-up"></i>
                            热门
                        </button>
                        <button class="category-filter">
                            <i class="fa fa-clock-o"></i>
                            最新
                        </button>
                    </div>
                </div>
                
                <ul class="topics-list">
                    <!-- 话题项1 -->
                    <li class="topic-item" data-topic-id="1">
                        <div class="topic-status">
                            <div class="topic-replies">32</div>
                            <div class="topic-replies-label">回复</div>
                        </div>
                        <div class="topic-content">
                            <h4 class="topic-title">
                                <a href="{{ url_for('forum_topic_detail', topic_id=1) }}">2024年计算机系考研经验分享</a>
                            </h4>
                            <div class="topic-meta">
                                <div class="topic-author">
                                    <img src="https://via.placeholder.com/20?text=学" alt="用户头像" class="topic-author-avatar">
                                    学长2023
                                </div>
                                <div class="topic-time">
                                    <i class="fa fa-clock-o"></i>
                                    3天前
                                </div>
                            </div>
                            <div class="topic-labels">
                                <a href="#" class="topic-label primary">考研</a>
                                <a href="#" class="topic-label success">经验分享</a>
                                <a href="#" class="topic-label warning">热门</a>
                            </div>
                        </div>
                        <div class="topic-stats">
                            <div class="topic-views">
                                <i class="fa fa-eye"></i>
                                528
                            </div>
                            <div class="topic-likes">
                                <i class="fa fa-thumbs-up"></i>
                                45
                            </div>
                        </div>
                    </li>
                    
                    <!-- 话题项2 -->
                    <li class="topic-item" data-topic-id="2">
                        <div class="topic-status">
                            <div class="topic-replies">18</div>
                            <div class="topic-replies-label">回复</div>
                        </div>
                        <div class="topic-content">
                            <h4 class="topic-title">
                                <a href="{{ url_for('forum_topic_detail', topic_id=2) }}">如何高效学习数据结构与算法？</a>
                            </h4>
                            <div class="topic-meta">
                                <div class="topic-author">
                                    <img src="https://via.placeholder.com/20?text=小" alt="用户头像" class="topic-author-avatar">
                                    小王同学
                                </div>
                                <div class="topic-time">
                                    <i class="fa fa-clock-o"></i>
                                    1周前
                                </div>
                            </div>
                            <div class="topic-labels">
                                <a href="#" class="topic-label primary">学习方法</a>
                                <a href="#" class="topic-label success">数据结构</a>
                            </div>
                        </div>
                        <div class="topic-stats">
                            <div class="topic-views">
                                <i class="fa fa-eye"></i>
                                342
                            </div>
                            <div class="topic-likes">
                                <i class="fa fa-thumbs-up"></i>
                                31
                            </div>
                        </div>
                    </li>
                    
                    <!-- 话题项3 -->
                    <li class="topic-item" data-topic-id="3">
                        <div class="topic-status">
                            <div class="topic-replies">45</div>
                            <div class="topic-replies-label">回复</div>
                        </div>
                        <div class="topic-content">
                            <h4 class="topic-title">
                                <a href="{{ url_for('forum_topic_detail', topic_id=3) }}">校园招聘季，计算机专业如何准备面试？</a>
                            </h4>
                            <div class="topic-meta">
                                <div class="topic-author">
                                    <img src="https://via.placeholder.com/20?text=就" alt="用户头像" class="topic-author-avatar">
                                    就业指导中心
                                </div>
                                <div class="topic-time">
                                    <i class="fa fa-clock-o"></i>
                                    2周前
                                </div>
                            </div>
                            <div class="topic-labels">
                                <a href="#" class="topic-label primary">就业</a>
                                <a href="#" class="topic-label success">面试技巧</a>
                                <a href="#" class="topic-label warning">热门</a>
                            </div>
                        </div>
                        <div class="topic-stats">
                            <div class="topic-views">
                                <i class="fa fa-eye"></i>
                                689
                            </div>
                            <div class="topic-likes">
                                <i class="fa fa-thumbs-up"></i>
                                63
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            
            <!-- 学习交流 -->
            <div class="category-section">
                <div class="category-header">
                    <h3 class="category-title">
                        <i class="fa fa-book category-icon"></i>
                        学习交流
                    </h3>
                    <div class="category-actions">
                        <button class="category-filter active">
                            <i class="fa fa-fire"></i>
                            热门
                        </button>
                        <button class="category-filter">
                            <i class="fa fa-clock-o"></i>
                            最新
                        </button>
                    </div>
                </div>
                
                <ul class="topics-list">
                    <!-- 话题项1 -->
                    <li class="topic-item" data-topic-id="4">
                        <div class="topic-status">
                            <div class="topic-replies">12</div>
                            <div class="topic-replies-label">回复</div>
                        </div>
                        <div class="topic-content">
                            <h4 class="topic-title">
                                <a href="{{ url_for('forum_topic_detail', topic_id=4) }}">计算机网络期末复习资料整理</a>
                            </h4>
                            <div class="topic-meta">
                                <div class="topic-author">
                                    <img src="https://via.placeholder.com/20?text=复" alt="用户头像" class="topic-author-avatar">
                                    复习达人
                                </div>
                                <div class="topic-time">
                                    <i class="fa fa-clock-o"></i>
                                    4天前
                                </div>
                            </div>
                            <div class="topic-labels">
                                <a href="#" class="topic-label primary">复习资料</a>
                                <a href="#" class="topic-label success">计算机网络</a>
                            </div>
                        </div>
                        <div class="topic-stats">
                            <div class="topic-views">
                                <i class="fa fa-eye"></i>
                                234
                            </div>
                            <div class="topic-likes">
                                <i class="fa fa-thumbs-up"></i>
                                28
                            </div>
                        </div>
                    </li>
                    
                    <!-- 话题项2 -->
                    <li class="topic-item" data-topic-id="5">
                        <div class="topic-status">
                            <div class="topic-replies">23</div>
                            <div class="topic-replies-label">回复</div>
                        </div>
                        <div class="topic-content">
                            <h4 class="topic-title">
                                <a href="{{ url_for('forum_topic_detail', topic_id=5) }}">机器学习入门推荐书籍和资源</a>
                            </h4>
                            <div class="topic-meta">
                                <div class="topic-author">
                                    <img src="https://via.placeholder.com/20?text=机" alt="用户头像" class="topic-author-avatar">
                                    ML爱好者
                                </div>
                                <div class="topic-time">
                                    <i class="fa fa-clock-o"></i>
                                    5天前
                                </div>
                            </div>
                            <div class="topic-labels">
                                <a href="#" class="topic-label primary">机器学习</a>
                                <a href="#" class="topic-label success">资源推荐</a>
                            </div>
                        </div>
                        <div class="topic-stats">
                            <div class="topic-views">
                                <i class="fa fa-eye"></i>
                                412
                            </div>
                            <div class="topic-likes">
                                <i class="fa fa-thumbs-up"></i>
                                42
                            </div>
                        </div>
                    </li>
                    
                    <!-- 话题项3 -->
                    <li class="topic-item" data-topic-id="6">
                        <div class="topic-status">
                            <div class="topic-replies">8</div>
                            <div class="topic-replies-label">回复</div>
                        </div>
                        <div class="topic-content">
                            <h4 class="topic-title">
                                <a href="{{ url_for('forum_topic_detail', topic_id=6) }}">Python编程遇到的常见问题及解决方案</a>
                            </h4>
                            <div class="topic-meta">
                                <div class="topic-author">
                                    <img src="https://via.placeholder.com/20?text=编" alt="用户头像" class="topic-author-avatar">
                                    Python程序员
                                </div>
                                <div class="topic-time">
                                    <i class="fa fa-clock-o"></i>
                                    1周前
                                </div>
                            </div>
                            <div class="topic-labels">
                                <a href="#" class="topic-label primary">Python</a>
                                <a href="#" class="topic-label danger">问题解决</a>
                            </div>
                        </div>
                        <div class="topic-stats">
                            <div class="topic-views">
                                <i class="fa fa-eye"></i>
                                189
                            </div>
                            <div class="topic-likes">
                                <i class="fa fa-thumbs-up"></i>
                                15
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            
            <!-- 分页 -->
            <div class="pagination">
                <div class="pagination-item disabled">
                    <i class="fa fa-angle-left"></i>
                </div>
                <div class="pagination-item active">1</div>
                <div class="pagination-item">2</div>
                <div class="pagination-item">3</div>
                <div class="pagination-item">...</div>
                <div class="pagination-item">10</div>
                <div class="pagination-item">
                    <i class="fa fa-angle-right"></i>
                </div>
            </div>
        </div>
        
        <!-- 侧边栏 -->
        <div class="forum-sidebar">
            <!-- 搜索框 -->
            <div class="sidebar-section">
                <div class="sidebar-section-header">
                    <h3 class="sidebar-section-title">搜索话题</h3>
                </div>
                <div class="sidebar-section-content">
                    <div class="search-box">
                        <input type="text" id="forum-search-input" class="search-input" placeholder="搜索话题...">
                        <button id="forum-search-btn" class="search-btn">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 分类列表 -->
            <div class="sidebar-section">
                <div class="sidebar-section-header">
                    <h3 class="sidebar-section-title">讨论分类</h3>
                </div>
                <div class="sidebar-section-content">
                    <ul class="categories-list">
                        <li class="category-item">
                            <a href="#" class="category-link">
                                <i class="fa fa-book category-icon-sidebar"></i>
                                <span>学习交流</span>
                            </a>
                            <span class="category-count">128</span>
                        </li>
                        <li class="category-item">
                            <a href="#" class="category-link">
                                <i class="fa fa-briefcase category-icon-sidebar"></i>
                                <span>就业与实习</span>
                            </a>
                            <span class="category-count">89</span>
                        </li>
                        <li class="category-item">
                            <a href="#" class="category-link">
                                <i class="fa fa-code category-icon-sidebar"></i>
                                <span>技术交流</span>
                            </a>
                            <span class="category-count">215</span>
                        </li>
                        <li class="category-item">
                            <a href="#" class="category-link">
                                <i class="fa fa-users category-icon-sidebar"></i>
                                <span>校园活动</span>
                            </a>
                            <span class="category-count">56</span>
                        </li>
                        <li class="category-item">
                            <a href="#" class="category-link">
                                <i class="fa fa-graduation-cap category-icon-sidebar"></i>
                                <span>考研与深造</span>
                            </a>
                            <span class="category-count">78</span>
                        </li>
                        <li class="category-item">
                            <a href="#" class="category-link">
                                <i class="fa fa-coffee category-icon-sidebar"></i>
                                <span>闲聊灌水</span>
                            </a>
                            <span class="category-count">142</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 热门标签 -->
            <div class="sidebar-section">
                <div class="sidebar-section-header">
                    <h3 class="sidebar-section-title">热门标签</h3>
                </div>
                <div class="sidebar-section-content">
                    <div class="tags-cloud">
                        <a href="#" class="tag-item">Python</a>
                        <a href="#" class="tag-item">Java</a>
                        <a href="#" class="tag-item">机器学习</a>
                        <a href="#" class="tag-item">数据结构</a>
                        <a href="#" class="tag-item">前端开发</a>
                        <a href="#" class="tag-item">后端开发</a>
                        <a href="#" class="tag-item">面试</a>
                        <a href="#" class="tag-item">考研</a>
                        <a href="#" class="tag-item">算法</a>
                        <a href="#" class="tag-item">数据库</a>
                        <a href="#" class="tag-item">计算机网络</a>
                        <a href="#" class="tag-item">操作系统</a>
                    </div>
                </div>
            </div>
            
            <!-- 在线用户 -->
            <div class="sidebar-section">
                <div class="sidebar-section-header">
                    <h3 class="sidebar-section-title">在线用户</h3>
                </div>
                <div class="sidebar-section-content">
                    <ul class="online-users">
                        <li class="online-user-item">
                            <img src="https://via.placeholder.com/36?text=张" alt="用户头像" class="online-user-avatar">
                            <div class="online-user-info">
                                <div class="online-user-name">张同学</div>
                                <div class="online-user-status">正在浏览</div>
                            </div>
                        </li>
                        <li class="online-user-item">
                            <img src="https://via.placeholder.com/36?text=李" alt="用户头像" class="online-user-avatar">
                            <div class="online-user-info">
                                <div class="online-user-name">李教授</div>
                                <div class="online-user-status">正在发帖</div>
                            </div>
                        </li>
                        <li class="online-user-item">
                            <img src="https://via.placeholder.com/36?text=王" alt="用户头像" class="online-user-avatar">
                            <div class="online-user-info">
                                <div class="online-user-name">王同学</div>
                                <div class="online-user-status">在线</div>
                            </div>
                        </li>
                        <li class="online-user-item">
                            <img src="https://via.placeholder.com/36?text=刘" alt="用户头像" class="online-user-avatar">
                            <div class="online-user-info">
                                <div class="online-user-name">刘同学</div>
                                <div class="online-user-status">在线</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 获取DOM元素
    const topicItems = document.querySelectorAll('.topic-item');
    const categoryFilters = document.querySelectorAll('.category-filter');
    const newTopicBtn = document.getElementById('new-topic-btn');
    const myTopicsBtn = document.getElementById('my-topics-btn');
    const forumSearchInput = document.getElementById('forum-search-input');
    const forumSearchBtn = document.getElementById('forum-search-btn');
    const paginationItems = document.querySelectorAll('.pagination-item:not(.disabled)');
    
    // 话题项点击事件
    topicItems.forEach(item => {
        item.addEventListener('click', function() {
            const topicId = this.getAttribute('data-topic-id');
            // 在实际应用中，这里应该跳转到话题详情页
            // 这里只是模拟跳转
            window.location.href = `{{ url_for('forum_topic_detail', topic_id=0) }}`.replace('0', topicId);
        });
        
        // 为话题标题添加独立的点击事件，防止冒泡
        const topicTitle = item.querySelector('.topic-title');
        if (topicTitle) {
            topicTitle.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        }
        
        // 为标签添加独立的点击事件，防止冒泡
        const topicLabels = item.querySelectorAll('.topic-label');
        topicLabels.forEach(label => {
            label.addEventListener('click', function(e) {
                e.stopPropagation();
                // 在实际应用中，这里应该根据标签筛选话题
                alert(`筛选标签: ${this.textContent.trim()}`);
            });
        });
    });
    
    // 分类筛选按钮点击事件
    categoryFilters.forEach(filter => {
        filter.addEventListener('click', function() {
            // 移除同一组内的所有active类
            const parent = this.closest('.category-actions');
            const siblings = parent.querySelectorAll('.category-filter');
            siblings.forEach(sibling => sibling.classList.remove('active'));
            
            // 添加当前按钮的active类
            this.classList.add('active');
            
            // 获取分类和排序方式
            const categoryTitle = this.closest('.category-section').querySelector('.category-title').textContent.trim();
            const sortType = this.querySelector('i').className.includes('fire') ? '热门' : '最新';
            
            // 在实际应用中，这里应该根据分类和排序方式重新加载话题列表
            console.log(`加载${categoryTitle}分类下的${sortType}话题`);
            
            // 显示加载状态
            const topicsList = this.closest('.category-section').querySelector('.topics-list');
            const originalContent = topicsList.innerHTML;
            topicsList.innerHTML = `
                <div style="display: flex; align-items: center; justify-content: center; height: 200px; color: #6c757d;">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">加载中...</span>
                    </div>
                    <span style="margin-left: 1rem;">加载中...</span>
                </div>
            `;
            
            // 模拟加载延迟
            setTimeout(() => {
                topicsList.innerHTML = originalContent;
                // 重新绑定事件
                bindTopicEvents();
            }, 800);
        });
    });
    
    // 新建话题按钮点击事件
    newTopicBtn.addEventListener('click', function() {
        // 在实际应用中，这里应该跳转到新建话题页面
        alert('新建话题功能将在后续版本中实现');
    });
    
    // 我的话题按钮点击事件
    myTopicsBtn.addEventListener('click', function() {
        // 在实际应用中，这里应该跳转到我的话题页面
        alert('我的话题功能将在后续版本中实现');
    });
    
    // 搜索按钮点击事件
    forumSearchBtn.addEventListener('click', function() {
        const searchTerm = forumSearchInput.value.trim();
        if (searchTerm) {
            // 在实际应用中，这里应该执行搜索操作
            alert(`搜索话题: ${searchTerm}`);
        } else {
            alert('请输入搜索内容');
        }
    });
    
    // 搜索输入框回车事件
    forumSearchInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            forumSearchBtn.click();
        }
    });
    
    // 分页按钮点击事件
    paginationItems.forEach(item => {
        if (!item.classList.contains('disabled')) {
            item.addEventListener('click', function() {
                // 移除所有分页按钮的active类
                paginationItems.forEach(paginationItem => paginationItem.classList.remove('active'));
                
                // 添加当前按钮的active类
                this.classList.add('active');
                
                // 获取页码
                let page = this.textContent.trim();
                if (this.querySelector('i')) {
                    // 如果是上一页或下一页按钮
                    const currentPage = document.querySelector('.pagination-item.active').textContent.trim();
                    if (this.querySelector('i').className.includes('left')) {
                        // 上一页
                        if (currentPage > 1) {
                            page = parseInt(currentPage) - 1;
                        }
                    } else {
                        // 下一页
                        if (currentPage < 10) {
                            page = parseInt(currentPage) + 1;
                        }
                    }
                }
                
                // 在实际应用中，这里应该加载对应页码的话题
                console.log(`加载第${page}页话题`);
                
                // 模拟加载状态
                const topicsLists = document.querySelectorAll('.topics-list');
                const originalContents = [];
                
                topicsLists.forEach(list => {
                    originalContents.push(list.innerHTML);
                    list.innerHTML = `
                        <div style="display: flex; align-items: center; justify-content: center; height: 200px; color: #6c757d;">
                            <div class="spinner-border" role="status">
                                <span class="sr-only">加载中...</span>
                            </div>
                            <span style="margin-left: 1rem;">加载中...</span>
                        </div>
                    `;
                });
                
                // 模拟加载延迟
                setTimeout(() => {
                    topicsLists.forEach((list, index) => {
                        list.innerHTML = originalContents[index];
                    });
                    // 重新绑定事件
                    bindTopicEvents();
                }, 800);
            });
        }
    });
    
    // 绑定话题项事件的函数
    function bindTopicEvents() {
        const newTopicItems = document.querySelectorAll('.topic-item');
        newTopicItems.forEach(item => {
            item.addEventListener('click', function() {
                const topicId = this.getAttribute('data-topic-id');
                window.location.href = `{{ url_for('forum_topic_detail', topic_id=0) }}`.replace('0', topicId);
            });
            
            const topicTitle = item.querySelector('.topic-title');
            if (topicTitle) {
                topicTitle.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            }
            
            const topicLabels = item.querySelectorAll('.topic-label');
            topicLabels.forEach(label => {
                label.addEventListener('click', function(e) {
                    e.stopPropagation();
                    alert(`筛选标签: ${this.textContent.trim()}`);
                });
            });
        });
    }
    
    // 页面载入动画
    document.addEventListener('DOMContentLoaded', function() {
        const forumHeader = document.querySelector('.forum-header');
        const forumLayout = document.querySelector('.forum-layout');
        
        forumHeader.style.opacity = '0';
        forumHeader.style.transform = 'translateY(20px)';
        forumHeader.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        
        forumLayout.style.opacity = '0';
        forumLayout.style.transform = 'translateY(20px)';
        forumLayout.style.transition = 'opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s';
        
        setTimeout(() => {
            forumHeader.style.opacity = '1';
            forumHeader.style.transform = 'translateY(0)';
        }, 100);
        
        setTimeout(() => {
            forumLayout.style.opacity = '1';
            forumLayout.style.transform = 'translateY(0)';
        }, 300);
        
        // 为话题项添加渐进式动画
        topicItems.forEach((item, index) => {
            item.style.opacity = '0';
            item.style.transform = 'translateY(10px)';
            item.style.transition = `opacity 0.3s ease ${300 + index * 50}ms, transform 0.3s ease ${300 + index * 50}ms`;
            
            setTimeout(() => {
                item.style.opacity = '1';
                item.style.transform = 'translateY(0)';
            }, 500 + index * 50);
        });
        
        // 为侧边栏元素添加渐进式动画
        const sidebarSections = document.querySelectorAll('.sidebar-section');
        sidebarSections.forEach((section, index) => {
            section.style.opacity = '0';
            section.style.transform = 'translateX(20px)';
            section.style.transition = `opacity 0.3s ease ${500 + index * 100}ms, transform 0.3s ease ${500 + index * 100}ms`;
            
            setTimeout(() => {
                section.style.opacity = '1';
                section.style.transform = 'translateX(0)';
            }, 700 + index * 100);
        });
    });
</script>
{% endblock %}